<template>
  <div>
    <div class="timee">
      <div class="top">
        <div class="go">限时购</div>

        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
            <span class="jie">后结束</span>
          </template>
        </van-count-down>
        <span class="pp"> 更多&gt;</span>
      </div>
      <div class="box">
        <div class="good" v-for="(v, index) in imgs" :key="index">
          <img :src="v" alt="" />
          <p>{{ text[index] }}</p>
          <span class="span">￥{{ money[index] }}</span>
          <del>￥{{ befor[index] }}</del>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import service from "../../utlis/request";
export default {
  data() {
    return {
      time: 30 * 60 * 60 * 1000,
      list: [],
      befor: [],
      money: [],
      text: [],
      imgs: [],
    };
  },
  mounted() {
    service({
      url: "Timelimit ",
      method: "get",
    }).then((res) => {
      this.imgs = res.data[0].data.timeimg;
      this.befor = res.data[0].data.befor;
      this.money = res.data[0].data.hotmoney;
      this.text = res.data[0].data.timetext;

      console.log(res.data);
    });
  },
};
</script>

<style scoped>
.timee {
  margin: 10px;
  height: 12.5rem;
  background-color: #fdeaea;
  border-radius: 10px;
}
.top {
  display: flex;
  height: 4rem;
  text-align: center;
  line-height: 4rem;
  justify-content: space-around;
  font-size: 14px;
}
.top .go {
  font-size: 18px;
  color: #333;
  font-weight: 700;
  margin-left: -1rem;
}
.jie {
  color: #333;
}
.top .time {
  color: #ee0a24;
}
.top .pp {
  color: #ee0a24;
  margin-left: 3rem;
}
.van-count-down {
  line-height: 4rem;
  color: #ee0a24;
}
.box {
  margin: -15px 5px;
  display: flex;
  overflow: scroll;
}
.box .good {
  width: 5.3125rem;
  height: 8.9375rem;
  margin-left: 10px;
  
}
.box .good img {
  width: 4.6875rem;
  height: 4.9375rem;
}
.good p {
  font-size: 2vw;
  margin-top: -1.5vw;
  color: #8d939c;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.good del {
  color: #8d939c;
  display: block;
  font-size: 2vw;
}
</style>